<template>
  <BaseLayout>
    <Layout.Sider
      v-model:collapsed="collapsed"
      :width="asiderWidth"
      :trigger="null"
      collapsible
      :theme="theme"
      class="layout-sider"
    >
      <AppLogo v-if="isShowLogo" :collapse="collapsed" />
      <ScrollContainer :style="getWrapperStyle">
        <BasicMenu :items="routes" :collapsed="collapsed" base-path="" />
      </ScrollContainer>
    </Layout.Sider>
    <Layout>
      <Icon icon="ant-design:user-outlined" />
      <Icon type="svg" icon="menu" />
      <Icon type="icon-font" icon="icon-xitongcanshupeizhi" />
      <Layout.Content> 1 </Layout.Content>
    </Layout>
  </BaseLayout>
</template>
<script setup>
import { computed, unref } from 'vue'
import { Layout } from 'ant-design-vue'
import BaseLayout from '../base/index.vue'
import AppLogo from '@/layouts/components/AppLogo/index.vue'
import { useSettingsStore, useAppStore } from '@/store'
import { useLayout } from '@/composables/layout/useLayout'
import { useLayoutMenu } from '@/composables/layout/useLayoutMenu'
import variables from '@/styles/variables.module.scss'
import BasicMenu from '@/layouts/components/Menu/BasicMenu.vue'
import { Icon } from '@/components/icon'
import { ScrollContainer } from '@/components/Container/index'
const appStore = useAppStore()
const settingsStore = useSettingsStore()
// 获取主题
const theme = computed(() => settingsStore.theme)
const collapsed = computed(() => !appStore.sidebar.opened)
const asiderWidth = computed(() => (collapsed.value ? 80 : 220))
const navbarHeight = computed(() => variables['navbar-height'])
const collapsedWidth = computed(() => variables['sidebar-width-collapsed'])
// 布局相关参数
const { isShowTagsView, isShowLogo, isSidebarOpen } = useLayout()
const { routes } = useLayoutMenu()
const getWrapperStyle = computed(() => {
  return {
    height: `calc(100% - ${unref(isShowLogo) ? unref(navbarHeight) : '0px'})`,
  }
})
</script>
<style lang="scss" scoped>
.layout {
  .ant-layout {
    overflow: hidden;
  }
}
</style>
